<template>
  <div>
    <p class="title">消息模板</p>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="stTypeName" label="分享类型" >
      </el-table-column>
      <el-table-column prop="stTitle" label="分享标题" show-overflow-tooltip>
      </el-table-column>
    
      <el-table-column prop="activeTime" label="操作">
        <template slot-scope="scope">
          <el-button @click="showDialog(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>

    </el-table>
  <!-- 新建/编辑 -->
  <el-dialog title="编辑" center :visible.sync="dialogFormVisible" width="600px">
    <el-form :model="form" label-width="120px">
      <el-form-item label="分享类型：">
        <el-input v-model="form.stTypeName" disabled></el-input>
      </el-form-item>
      <el-form-item label="分享标题：">
        <el-input v-model="form.stTitle"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="updateShareTemplate" size="small">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import apis from "../../../apis/modules/shareTemplate"
  export default {
    data() {
      return {
        dialogFormVisible: false,
        form:{
          stTitle: "",//分享标题
          stType: "", //分享类型
          stTypeName:''
        },
        tableData: [],
      };
    },

    methods: {
      //获取分享模板列表
      getShareTemplate(){
        apis.getShareTemplate().then((res) => {
          if (res.code == 200) {
            res.data.forEach(template => {
              let stTypeName;
              switch(template.stType){
                case '1': stTypeName = '直播'; break;
                case '2': stTypeName = '动态'; break;
                case '3': stTypeName = '作品'; break;
                case '4': stTypeName = '活动'; break;
                default: stTypeName = '广播'; break;
              }
              template.stTypeName = stTypeName;
            })
            this.tableData = res.data;
          }
        });
      },
      //显示弹窗
      showDialog(row){
        this.form.stTitle = row.stTitle;
        this.form.stType = row.stType;
        this.form.stTypeName = row.stTypeName;
        this.dialogFormVisible = true;
      },
      //修改分享模板
      updateShareTemplate(){
        apis.updateShareTemplate(this.form.stType, this.form.stTitle).then((res) => {
          if (res.code == 200) {
            this.$message.success('修改成功');
            this.dialogFormVisible = false;
            this.getShareTemplate();
          }
        });
      },
    },
    mounted() {
      this.getShareTemplate();
    }
  };
</script>

<style lang="scss" scoped>
 .title{
   margin-bottom: 32px;
 }
</style>